<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<p>非父子组件之间的传值</p>
<div id="root">

  <box content="hello" ></box>
  <box content="world" ></box>

</div>
<script>

    Vue.prototype.bus=new Vue();

    Vue.component("box",{
        props:["content"],
        data:function(){
            return {
                message:this.content
            }
        },
        template:"<p @click='changeVal'> {{message}}</p>",
        methods:{
            changeVal:function () {
                this.bus.$emit('change',this.message)
            }
        },
        mounted:function () {
            var this_=this;
            this.bus.$on("change",function (val) {
                this_.message=val;
            })
        }
    })
    
    var vm =new Vue({
        el:"#root"
    })
</script>
</body>
</html>